<script setup>
import { useRoute } from 'vue-router'
import { computed, ref, reactive } from 'vue'
// 获取路由参数
const route = useRoute()

// 商品信息（支持单商品）
const product = computed(() => ({
  name: route.query.name || '',
  price: Number(route.query.price) || 0,
  quantity: Number(route.query.quantity) || 1,
  image: route.query.image || '',
  total: Number(route.query.total) || 0,
}))

// 收货信息（可后续对接用户信息）
const receiver = reactive({
  name: '张三',
  phone: '19103079718',
  address: '北京市海淀区中关村大街1号',
})
const isEditing = ref(false)
const tempAddressInfo = reactive({ ...receiver })

// 编辑地址功能
const startEdit = () => {
  tempAddressInfo.name = receiver.name
  tempAddressInfo.phone = receiver.phone
  tempAddressInfo.address = receiver.address
  isEditing.value = true
}
const cancelEdit = () => {
  isEditing.value = false
  tempAddressInfo.name = receiver.name
  tempAddressInfo.phone = receiver.phone
  tempAddressInfo.address = receiver.address
}
const saveEdit = () => {
  receiver.name = tempAddressInfo.name
  receiver.phone = tempAddressInfo.phone
  receiver.address = tempAddressInfo.address
  isEditing.value = false
}

// 支付方式相关
const radio1 = ref('') // 默认不选中
const PayMyBalance = new URL('@/assets/images/pay-balance-icon.png', import.meta.url).href
const PayGoole = new URL('@/assets/images/pay-google-icon.png', import.meta.url).href
const PayUnionpay = new URL('@/assets/images/pay-unionpay-icon.png', import.meta.url).href
const PayVisa = new URL('@/assets/images/pay-visa-icon.png', import.meta.url).href
const PayWechat = new URL('@/assets/images/pay-wechat-icon.png', import.meta.url).href
const PayZfb = new URL('@/assets/images/pay-zfb-icon.png', import.meta.url).href
const PayOptionIcon = new URL('@/assets/images/pay-option-icon.png', import.meta.url).href

// 支付方式展开逻辑：只展开当前选中的卡片
const isExpand = (val) => radio1.value === val
</script>

<template>
  <div class="pay-page">
    <div class="pay-page-card">
      <!--订单支付标题模块-->
      <div class="pay-page-card-title">订单支付</div>
      <div class="pay-page-card-subtitle">请完成支付以确认订单</div>
      <!--订单信息模块-->
      <div class="pay-page-card-title pay-page-card-title-section pay-page-card-title-flex">
        订单信息
      </div>
      <div class="pay-page-card-divider"></div>
      <div class="pay-page-card-order-info">
        <div class="pay-page-card-order-info-number">
          <div class="pay-page-card-order-info-number-title">订单编号</div>
          <div class="pay-page-card-order-info-number-value">202503252399</div>
        </div>
        <div class="pay-page-card-order-info-time">
          <div class="pay-page-card-order-info-time-title">下单时间</div>
          <div class="pay-page-card-order-info-time-value">2025-03-25 14:30</div>
        </div>
      </div>
      <!--商品信息模块-->
      <div class="pay-page-card-commodity-info">
        <div class="pay-page-card-order-info-row">
          <img :src="product.image" class="pay-page-card-order-info-img" />
          <div class="pay-page-card-order-info-row-part1">
            <span class="pay-page-card-order-info-value">名字{{ product.name }}</span>
            <span class="pay-page-card-order-info-value">￥{{ product.price.toFixed(2) }}</span>
          </div>
        </div>
        <div class="pay-page-card-order-info-row">
          <span class="pay-page-card-order-info-value">数量：{{ product.quantity }}</span>
        </div>
        <div class="pay-page-card-order-info-row">
          <span class="pay-page-card-order-info-value pay-page-card-order-info-total"
            >￥{{ (product.price * product.quantity).toFixed(2) }}</span
          >
        </div>
      </div>
      <!--收货信息模块-->
      <div
        class="pay-page-card-title pay-page-card-title-section pay-page-card-title-flex"
        style="margin-top: 32px"
      >
        <span>收货信息</span>
        <button v-if="!isEditing" class="pay-page-card-edit-btn" @click="startEdit">
          编辑信息
        </button>
        <template v-else>
          <button class="pay-page-card-edit-btn" @click="saveEdit">保存</button>
          <button class="pay-page-card-cancel-btn" @click="cancelEdit">取消</button>
        </template>
      </div>
      <div class="pay-page-card-divider"></div>
      <transition name="pay-page-info-expand">
        <div class="pay-page-card-receiver-info" v-show="true" :class="{ expand: isEditing }">
          <template v-if="!isEditing">
            <div class="pay-page-card-receiver-info-row">
              <span class="pay-page-card-receiver-info-label">收货人</span>
              <span class="pay-page-card-receiver-info-value">{{ receiver.name }}</span>
            </div>
            <div class="pay-page-card-receiver-info-row">
              <span class="pay-page-card-receiver-info-label">联系电话</span>
              <span class="pay-page-card-receiver-info-value">{{ receiver.phone }}</span>
            </div>
            <div class="pay-page-card-receiver-info-row">
              <span class="pay-page-card-receiver-info-label">收货地址</span>
              <span class="pay-page-card-receiver-info-value">{{ receiver.address }}</span>
            </div>
          </template>
          <template v-else>
            <div class="pay-page-card-receiver-info-row">
              <span class="pay-page-card-receiver-info-label">收货人</span>
              <input class="pay-page-card-receiver-info-input" v-model="tempAddressInfo.name" />
            </div>
            <div class="pay-page-card-receiver-info-row">
              <span class="pay-page-card-receiver-info-label">联系电话</span>
              <input class="pay-page-card-receiver-info-input" v-model="tempAddressInfo.phone" />
            </div>
            <div class="pay-page-card-receiver-info-row">
              <span class="pay-page-card-receiver-info-label">收货地址</span>
              <input class="pay-page-card-receiver-info-input" v-model="tempAddressInfo.address" />
            </div>
          </template>
        </div>
      </transition>
      <!--支付方式模块---->
      <div class="pay-page-card-title pay-page-card-title-section" style="margin-top: 32px">
        支付方式
      </div>
      <div class="pay-page-card-divider"></div>
      <div class="pay-page-card-pay-info">
        <div class="pay-page-card-pay-info-row">
          <span class="pay-page-card-receiver-info-label">选择支付方式</span>
        </div>
        <el-radio-group v-model="radio1">
          <!--余额支付-->
          <div class="pay-page-card-pay-info-way" :class="{ active: isExpand('1') }">
            <el-radio value="1" size="large"></el-radio>
            <div class="pay-page-card-pay-info-icon">
              <img :src="PayMyBalance" alt="" />
            </div>
            <div class="pay-page-card-pay-info-title">余额</div>
          </div>
          <div class="pay-page-card-pay-info-way-detail" v-if="isExpand('1')">
            <div class="pay-page-card-pay-info-way-detail-title">
              您将被转到您的支付提供商界面，完成本次购买。<br />
              <img :src="PayOptionIcon" alt="支付平台" style="height: 32px; margin: 10px 0" />
              <div style="margin-top: 10px">
                付款由 Nuvei 支持
                <a href="#" style="margin: 0 8px">条款和条件</a>|
                <a href="#">隐私政策</a>
              </div>
            </div>
          </div>
          <!--谷歌支付-->
          <div class="pay-page-card-pay-info-way" :class="{ active: isExpand('2') }">
            <el-radio value="2" size="large"></el-radio>
            <div class="pay-page-card-pay-info-icon"><img :src="PayGoole" alt="" /></div>
            <div class="pay-page-card-pay-info-title">谷歌</div>
          </div>
          <div class="pay-page-card-pay-info-way-detail" v-if="isExpand('2')">
            <div class="pay-page-card-pay-info-way-detail-title">
              您将被转到您的支付提供商界面，完成本次购买。<br />
              <img :src="PayOptionIcon" alt="支付平台" style="height: 32px; margin: 10px 0" />
              <div style="margin-top: 10px">
                付款由 Nuvei 支持
                <a href="#" style="margin: 0 8px">条款和条件</a>|
                <a href="#">隐私政策</a>
              </div>
            </div>
          </div>
          <!--银联支付-->
          <div class="pay-page-card-pay-info-way" :class="{ active: isExpand('3') }">
            <el-radio value="3" size="large"></el-radio>
            <div class="pay-page-card-pay-info-icon"><img :src="PayUnionpay" alt="" /></div>
            <div class="pay-page-card-pay-info-title">银联</div>
          </div>
          <div class="pay-page-card-pay-info-way-detail" v-if="isExpand('3')">
            <div class="pay-page-card-pay-info-way-detail-title">
              您将被转到您的支付提供商界面，完成本次购买。<br />
              <img :src="PayOptionIcon" alt="支付平台" style="height: 32px; margin: 10px 0" />
              <div style="margin-top: 10px">
                付款由 Nuvei 支持
                <a href="#" style="margin: 0 8px">条款和条件</a>|
                <a href="#">隐私政策</a>
              </div>
            </div>
          </div>
          <!--VISA支付-->
          <div class="pay-page-card-pay-info-way" :class="{ active: isExpand('4') }">
            <el-radio value="4" size="large"></el-radio>
            <div class="pay-page-card-pay-info-icon"><img :src="PayVisa" alt="" /></div>
            <div class="pay-page-card-pay-info-title">VISA</div>
          </div>
          <div class="pay-page-card-pay-info-way-detail" v-if="isExpand('4')">
            <div class="pay-page-card-pay-info-way-detail-title">
              您将被转到您的支付提供商界面，完成本次购买。<br />
              <img :src="PayOptionIcon" alt="支付平台" style="height: 32px; margin: 10px 0" />
              <div style="margin-top: 10px">
                付款由 Nuvei 支持
                <a href="#" style="margin: 0 8px">条款和条件</a>|
                <a href="#">隐私政策</a>
              </div>
            </div>
          </div>
          <!--微信支付-->
          <div class="pay-page-card-pay-info-way" :class="{ active: isExpand('5') }">
            <el-radio value="5" size="large"></el-radio>
            <div class="pay-page-card-pay-info-icon"><img :src="PayWechat" alt="" /></div>
            <div class="pay-page-card-pay-info-title">微信</div>
          </div>
          <div class="pay-page-card-pay-info-way-detail" v-if="isExpand('5')">
            <div class="pay-page-card-pay-info-way-detail-title">
              您将被转到您的支付提供商界面，完成本次购买。<br />
              <img :src="PayOptionIcon" alt="支付平台" style="height: 32px; margin: 10px 0" />
              <div style="margin-top: 10px">
                付款由 Nuvei 支持
                <a href="#" style="margin: 0 8px">条款和条件</a>|
                <a href="#">隐私政策</a>
              </div>
            </div>
          </div>
          <!--支付宝支付-->
          <div class="pay-page-card-pay-info-way" :class="{ active: isExpand('6') }">
            <el-radio value="6" size="large"></el-radio>
            <div class="pay-page-card-pay-info-icon"><img :src="PayZfb" alt="" /></div>
            <div class="pay-page-card-pay-info-title">支付宝</div>
          </div>
          <div class="pay-page-card-pay-info-way-detail" v-if="isExpand('6')">
            <div class="pay-page-card-pay-info-way-detail-title">
              您将被转到您的支付提供商界面，完成本次购买。<br />
              <img :src="PayOptionIcon" alt="支付平台" style="height: 32px; margin: 10px 0" />
              <div style="margin-top: 10px">
                付款由 Nuvei 支持
                <a href="#" style="margin: 0 8px">条款和条件</a>|
                <a href="#">隐私政策</a>
              </div>
            </div>
          </div>
        </el-radio-group>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.pay-page {
  width: 98vw;
  min-height: 100vh;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  .pay-page-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    width: 700px;
    padding: 36px 40px 40px 40px;
    margin: 40px 0;
    .pay-page-card-title {
      font-size: 32px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 8px;
      &.pay-page-card-title-section {
        font-size: 22px;
        font-weight: bold;
        text-align: left;
        margin-bottom: 18px;
        margin-top: 24px;
      }
      &.pay-page-card-title-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .pay-page-card-edit-btn {
      margin-left: auto;
      background: #222;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 6px 18px;
      font-size: 15px;
      font-weight: 550;
      cursor: pointer;
      transition: background 0.2s;
      &:hover {
        background: #ff9800;
        color: #222;
      }
    }
    .pay-page-card-cancel-btn {
      margin-left: 10px;
      background: #fff;
      color: #222;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 6px 18px;
      font-size: 15px;
      font-weight: 550;
      cursor: pointer;
      transition: background 0.2s;
      &:hover {
        background: #eee;
        color: #ff9800;
      }
    }
    .pay-page-card-subtitle {
      color: #6b7280;
      text-align: center;
      margin-bottom: 32px;
      font-size: 18px;
    }
    .pay-page-card-divider {
      width: 100%;
      height: 1px;
      background: #ececec;
      margin-bottom: 18px;
    }
    .pay-page-card-order-info {
      display: flex;
      font-size: 18px;
      justify-content: space-between;
      .pay-page-card-order-info-number,
      .pay-page-card-order-info-time {
        .pay-page-card-order-info-number-title,
        .pay-page-card-order-info-time-title {
          color: #6b7280;
        }
      }
    }
    /* 订单信息模块 */
    .pay-page-card-commodity-info {
      display: flex;
      font-size: 18px;
      background: #f7f7f7;
      margin-top: 20px;
      border-radius: 8px;
      justify-content: space-between;
      .pay-page-card-order-info-row {
        display: flex;
        align-items: center;
        margin-bottom: 14px;
        .pay-page-card-order-info-row-part1 {
          display: grid;
        }
        .pay-page-card-order-info-value {
          color: #444;
          margin-left: 16px;
        }
        .pay-page-card-order-info-img {
          width: 56px;
          height: 76px;
          object-fit: cover;
          border-radius: 6px;
          margin-left: 16px;
          margin-top: 16px;
          background: #fff;
          border: 1px solid #eee;
        }
        .pay-page-card-order-info-total {
          color: #ff0f23;
          font-size: 20px;
          font-weight: bold;
          margin-right: 30px;
        }
      }
    }
    /* 收货信息模块 */
    .pay-page-card-receiver-info {
      font-size: 17px;
      .pay-page-card-receiver-info-row {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .pay-page-card-receiver-info-label {
          color: #6b7280;
          font-weight: 500;
          min-width: 90px;
        }
        .pay-page-card-receiver-info-value {
          color: #222;
          margin-left: 16px;
        }
        .pay-page-card-receiver-info-input {
          margin-left: 16px;
          padding: 6px 12px;
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          font-size: 16px;
          color: #222;
          outline: none;
          transition: border-color 0.2s;
          &:focus {
            border-color: #ff9800;
          }
        }
      }
    }
    // 支付方式模块
    .pay-page-card-pay-info {
      :deep(.el-radio__inner) {
        width: 22px;
        height: 22px;
      }
      .pay-page-card-pay-info-row {
        color: #6b7280;
        font-weight: 500;
        min-width: 90px;
      }
      .pay-page-card-pay-info-way {
        align-items: center;
        display: flex;
        width: 100%;
        height: 70px;
        border-radius: 10px;
        background: #f7f7f7;
        margin-bottom: 15px;
        padding-left: 30px;
        .pay-page-card-pay-info-title {
          font-size: 18px;
          margin-left: 15px;
        }
        .pay-page-card-pay-info-icon {
          width: 50px;
          height: 50px;
          border-radius: 8px;
          img {
            justify-content: center;
            align-items: center;
          }
        }
        &.active {
          color: #ff9800;
          border-color: #ff9800;
          background: #fff7e6;
        }
      }
      .pay-page-card-pay-info-way-detail {
        width: 100%;
        border: 1px solid #eee;
        border-radius: 8px;
        background-color: #fafafa;
        height: 200px;
        margin-bottom: 15px;

        .pay-page-card-pay-info-way-detail-title {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
